<template>
  <div class="container">
    <div class="top">收货信息</div>
    <div class="formlist">
      <el-form ref="form" label-width="80px">
        <el-form-item label="收货人">
          <el-input type="text" class="width" v-model="width"></el-input>
        </el-form-item>

        <el-form-item label="手机号">
          <el-input type="num" class="width"></el-input>
        </el-form-item>

        <el-form-item label="收货时间">
          <el-select placeholder="请选择" value="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在地区">
          <el-select placeholder="北京" class="label" value="">
            <el-option label="label" value="value"></el-option>
          </el-select>
          <el-select placeholder="北京" class="label" value="">
            <el-option label="label" value="value"></el-option>
          </el-select>
          <el-select placeholder="北京" class="label" value="">
            <el-option label="label" value="value"></el-option>
          </el-select>
        </el-form-item>

        <el-form label-width="80px" class="text">
          <el-form-item label="详细地址">
            <el-input v-model="text" class="ui-input"></el-input>
          </el-form-item>
        </el-form>

        <el-form-item label="地址类型">
          <el-radio-group>
            <el-radio label="家庭"></el-radio>
            <el-radio label="公司"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-checkbox
          class="el-checkbox"
          label="设为默认地址"
          name="设为默认地址"
          v-model="checked"
        ></el-checkbox>
      </el-form>
    </div>

    <div class="container">
      <div class="top"><p>商品清单</p></div>
      <el-table>
        <el-table-column prop="date" label="唯品会发货订单" width="580">
        </el-table-column>
        <el-table-column prop="name" label="尺码" width="110">
        </el-table-column>
        <el-table-column prop="address" label="单价" width="110"> </el-table-column>
        <el-table-column prop="address" label="数量" width="110"> </el-table-column>
      </el-table>
      <div class="foote">
          <div class="test"></div>
          <p>运费：免运费</p> <p></p> <p>本组商品金额：<i class="p">¥749</i></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "周一至周日均可收货",
        },
        {
          value: "选项2",
          label: "周六日、节假日收货",
        },
        {
          value: "选项3",
          label: "周一至周五收货",
        },
      ],
      value: "",
      width: "",
      text: "",
      checked: true,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 960px;
  height: 1000px;
  margin: 0 auto;
  font-size: 16px;
  .top {
    height: 40px;
    background: #f9f9f9;
    border-left: 2px solid #f3168a;
    line-height: 40px;
    padding-left: 20px;
    margin-bottom: 40px;
    box-sizing: border-box;
  }
  .formlist {
    width: 600px;
    height: 500px;
    margin: 0 auto;
    // background: plum;
    .width {
      width: 300px;
      height: 10px;
    }
    .label {
      width: 150px;
      margin: 0 10px;
    }
    .ui-input {
      height: 18px !important;
      width: 500px;
    }
    .el-checkbox {
      margin: 0 80px;
    }
  }
}
.foote{
  display: flex;
  font-size: 12px;
  padding: 0 20px;
  margin-top: 5px;
  font-weight: bold;
  .test{
    flex: 1 ;
  }
  p{
    margin: 0 10px;
    i{
    color: red;
  }
  }
}
</style>
